(function() {
	"use strict";
	var track = document.getElementById("track"), //滚轮轨道
		scrBar = document.getElementById("scrBar"), //滑块
		upBtn = document.getElementById("up"), //滚轮轨道
		downBtn = document.getElementById("down"), //滑块
		itemBox = document.getElementById("itemBox"), //选项区
		item = itemBox.getElementsByTagName("li"), //选项
		contentBox = document.getElementById("contentBox"), //内容视窗
		contentList = contentBox.getElementsByTagName("li"), //选项内容
		cookie = 0;

	if(!cookie) {
		var index = 0;
	}

	contentList[0].style.display = "block"; //IE5
	contentBox.setAttribute("tabIndex", "-1"); //必须设为-1才能聚焦
	loadLastStatus(); //载入上次状态
	addHandler(itemBox, "click", handleBy); //事件委托
	addHandler(scrBar, "mousedown", mouseControl); //滑块控制
	addHandler(contentBox, "keydown", keyControl); //键盘控制
	addHandler(contentBox, "mouseover", function() {
		addHandler(contentBox, "mousewheel", wheelControl); //滚轮控制，addHandler函数已兼容火狐
	}); //键盘控制
	addHandler(upBtn, "click", function() { //upBtn按钮控制
		controlDir("up");
	});
	addHandler(downBtn, "click", function() { //down按钮控制
		controlDir(0);
	});

	//检测IE浏览器版本是否低于 9
	function checkLtIE9() {
		var userAgent = navigator.userAgent;
		return userAgent.indexOf("MSIE") > 0 && (
			userAgent.indexOf("MSIE 6.0") > 0 ||
			userAgent.indexOf("MSIE 7.0") > 0 ||
			userAgent.indexOf("MSIE 8.0") > 0);
	}

	/*功能：兼容绑定事件
	 *参数1：将要绑定事件的元素obj
	 *参数2：绑定的事件类型不加on
	 *参数3：事件处理函数
	 * 返回值：无
	 */
	function addHandler(element, type, fn) {
		var ltIE9 = checkLtIE9();

		if(element.addEventListener) {
			if(type === "mousewheel" && navigator.userAgent.match("Firefox")) {
				type = "DOMMouseScroll"; //火狐滚轮事件
			}
			element.addEventListener(type, fn, false);
		} else if(element.attachEvent) {
			element.attachEvent('on' + type, fn);
		} else {
			element['on' + type] = null;
		}
	}

	/*功能：兼容移除绑定的事件
	 *参数1：将要绑定事件的元素obj
	 *参数2：绑定的事件类型不加on
	 *参数3：事件处理函数
	 * 返回值：无
	 */
	function removeHandler(element, type, fn) {
		var ltIE9 = checkLtIE9();

		if(element.removeEventListener) {
			if(type === "mousewheel" && navigator.userAgent.match("Firefox")) {
				type = "DOMMouseScroll"; //火狐滚轮事件
			}
			element.removeEventListener(type, fn, false);
		} else if(element.detachEvent) {
			
			element.detachEvent('on' + type, fn);
		} else {
			element['on' + type] = null;
		}
	}

	/*功能：兼容阻止事件冒泡
	 *参数1：事件对象
	 * 返回值：无
	 */
	function stopPropagation(event) {
		if(event.stopPropagation) {
			event.stopPropagation();
		} else {
			event.cancelBubble = true;
		}
	}

	/*功能：兼容阻止浏览器默认行为
	 *参数1：事件对象
	 * 返回值：无
	 */
	function preventDefault(event) {
		if(event.preventDefault) {
			event.preventDefault();
		} else {
			event.returnValue = false;
		}
	}

	/*功能：兼容获取事件对象
	 *参数1：事件对象
	 * 返回值：兼容的事件对象
	 */
	function getEvent(event) {
		return event ? event : window.event;
	}

	/*功能：兼容获取事件源
	 *参数1：事件对象
	 * 返回值：兼容的事件对象
	 */
	function getTarget(event) {
		return event.target || event.srcElement;
	}

	/*功能：获取cookie
	 *参数1：获取cookie名，字符串
	 * 返回值：cookie值,获取失败返回空字符
	 */
	function getCookie(name) {
		var cookieArr = document.cookie.split("; ");

		for(var i = 0; i < cookieArr.length; i++) {
			var item = cookieArr[i].split("=");
			if(item[0] == name) {
				return item[1];
			}
		}
		return "";
	}

	/*功能：保存cookie
	 *参数1：cookie名，字符串
	 * 参数2：cookie值，字符串
	 * 参数3：有效期
	 * 返回值：无
	 */
	function setCookie(name, value, days) {
		if(days) {
			var date = new Date();
			date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
			var expires = "; expires=" + date.toGMTString();
		} else {
			expires = "";
		}
		document.cookie = name + "=" + encodeURI(value) + expires + "; path=/";
	}

	function getStyle(obj, name) {
		if(obj.currentStyle) {
			return obj.currentStyle[name];
		} else {
			return getComputedStyle(obj, false)[name];
		}
	}

	function startMove(obj, attr, iTarget) {
		clearInterval(obj.timer);
		obj.timer = setInterval(function() {
			var cur = 0;

			if(attr == 'opacity') {
				cur = Math.round(getStyle(obj, attr) * 100);
			} else {
				cur = parseInt(getStyle(obj, attr));
			}

			var speed = (iTarget - cur) / 6;
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

			if(cur == iTarget) {
				clearInterval(obj.timer);
			} else {
				if(attr == 'opacity') {
					obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
					obj.style.opacity = (cur + speed) / 100;
				} else {
					obj.style[attr] = cur + speed + 'px';
				}
			}
		}, 1000/60);
	}

	/*功能：通过改变滑块top值，改变内容top值
	 *参数1：滑块位置
	 * 返回值：无
	 */
	function toBarTop(barPos) {
		var tIndex = cookie ? getTargetIndex() : index, //索引
			barArea,
			contentHeight = contentList[tIndex].offsetHeight, //内容高度
			boxHeight = contentBox.offsetHeight; //可视区高度

		if(track.style.display = "none") {
			track.style.display = "block"; //隐藏状态时无法获取属性
		}

		barArea = track.offsetHeight - scrBar.offsetHeight;

		if(barPos > barArea) {
			barPos = barArea;
		} else if(barPos < 0) {
			barPos = 0;
		}

		if(contentHeight <= boxHeight) { //视窗高度<高度时不显示滑块及滑块轨道
			track.style.display = "none";
			scrBar.style.top = 0;
			contentList[tIndex].style.top = 0;
		} else {
			var rate = barPos / barArea, //滑块到顶端的距离/滑块可移动的距离
				contentPos = -rate * (contentHeight - boxHeight);

			track.style.display = "block";
			scrBar.style.top = barPos + "px";
			contentPos = contentPos > 0 ? Math.ceil(contentPos) : Math.floor(contentPos);
			startMove(contentList[tIndex], "top", contentPos);
		}

		if(cookie) {
			setCookie("scrBar" + tIndex, barPos, 10); //保存当前选项滑块位置
		}

	}

	/*功能：通过改变content top值，改变滑块top值
	 *参数1：内容位置
	 * 返回值：无
	 */
	function toContentTop(contentPos) {
		var tIndex = cookie ? getTargetIndex() : index, //索引
			contentHeight = contentList[tIndex].offsetHeight, //内容高度
			boxHeight = contentBox.offsetHeight, //可视区高度
			scrollArea = contentHeight - boxHeight, //内容可滚动区域
			rate = contentPos / scrollArea, //比例
			barArea = track.offsetHeight - scrBar.offsetHeight, //滑块可移动区域
			barPos = -rate * barArea; //滑块位置

		if(barPos <= 0) {
			startMove(scrBar, "top", 0);
			startMove(contentList[tIndex], "top", 0);
		} else if(barPos > barArea) {
			startMove(scrBar, "top", barArea);
			startMove(contentList[tIndex], "top", -scrollArea);
		} else if(contentHeight < boxHeight) {
			scrBar.style.top = 0;
			track.style.display = "none";
		} else {
			barPos = barPos > 0 ? Math.ceil(barPos) : Math.floor(barPos);
			startMove(scrBar, "top", barPos);
			contentPos = contentPos > 0 ? Math.ceil(contentPos) : Math.floor(contentPos);
			startMove(contentList[tIndex], "top", contentPos);
		}

		if(cookie) {
			setCookie("scrBar" + tIndex, barPos, 10); //保存当前选项滑块位置
		}
	}

	/*功能：滚轮滚动页面
	 *参数1：事件对象
	 * 返回值：无
	 */
	function wheelControl(e) {
		var e = getEvent(e),
			eCode = e.wheelDelta ? (e.wheelDelta > 0) : (e.detail < 0), //wheelDelta：火狐一次滚动距离，detail：一次滚动距离
			contentPos, //火狐向下正,其他浏览器为负
			tIndex = cookie ? getTargetIndex() : index, //索引
			speed = contentBox.offsetHeight - 20;

		if(eCode) {
			contentPos = contentList[tIndex].offsetTop + speed;
		} else {
			contentPos = contentList[tIndex].offsetTop - speed;
		}

		toContentTop(contentPos);
		preventDefault(e); //防止页面随着滚动
	}

	//鼠标按下
	function mouseControl(e) {
		var e = getEvent(e),
			ltIE9 = checkLtIE9();

		window.getSelection ? window.getSelection().removeAllRanges() :
			document.selection.empty();
		if(e.buttons == 2 || e.buttons == 4) {
			return; //屏蔽鼠标右键、中键
		}

		var mouseOrig = e.clientY,
			barOrig = scrBar.offsetTop;

		//鼠标按下同时移动
		document.onmousemove = function(e) {
			var e = getEvent(e),
				barPos = e.clientY - mouseOrig + barOrig;

			toBarTop(barPos);
		}
		//鼠标释放
		document.onmouseup = function(e) {
			document.onmousemove = null;

			if(ltIE9) {
				scrBar.releaseCapture();
			}
		}
		ltIE9 ? scrBar.setCapture() : preventDefault(e);
		//防止按下鼠标拖拽时出现不能监听鼠标释放事件
	}

	//键盘控制
	function keyControl(e) {
		var e = getEvent(e),
			contentPos,
			keyCode = e.keyCode ? e.keyCode : e.charCode,
			tIndex = cookie ? getTargetIndex() : index, //索引
			speed = contentBox.offsetHeight - 20;

		if(keyCode === 83 || keyCode === 40) {
			contentPos = contentList[tIndex].offsetTop - speed;
			toContentTop(contentPos);
		} else if(keyCode === 87 || keyCode === 38) {
			contentPos = contentList[tIndex].offsetTop + speed;
			toContentTop(contentPos);
		}
		preventDefault(e);
	}

	//按钮控制
	function controlDir(dir) {
		var contentPos,
			tIndex = cookie ? getTargetIndex() : index, //索引
			speed = dir == "up" ? contentBox.offsetHeight - 20 : -(contentBox.offsetHeight - 20);
		contentPos = contentList[tIndex].offsetTop + speed;

		toContentTop(contentPos);
	}

	//委托处理函数
	function handleBy(e) {
		var e = getEvent(e),
			target = getTarget(e);

		if(target.nodeName.toLocaleLowerCase() == "li") {
			var tIndex = target.index,
				barPos;

			showNow(tIndex);
			scrBar.style.height = getScrBarHeight(tIndex) + "px";
			if(cookie) {
				setCookie("target", tIndex, 10); //当前索引保存为cookie
				barPos = getBarPos(tIndex);
			} else {
				index = tIndex;
				barPos = 0;
			}
			toBarTop(barPos);
		}

		contentBox.style.opacity = 0;
		startMove(contentBox, "opacity", 100);
		preventDefault(e);
	}

	//显示为当前选项,参数为显示项索引
	function showNow(tIndex) {
		for(var j = 0; j < item.length; j++) {
			if(item[j].index === undefined) {
				item[j].index = j;
			}
			//先清除
			item[j].className = "";
			contentList[j].style.display = "none";
		}
		//再显示当前
		item[tIndex].className = "on";
		contentList[tIndex].style.display = "block";
	}

	//获取当前选项索引
	function getTargetIndex() {
		return getCookie("target") !== "" ? getCookie("target") : 0;
	}

	//获取选项滑块位置，参数为要获取选项滑块位置的索引
	function getBarPos(tIndex) {
		return getCookie("scrBar" + tIndex) !== "" ? getCookie("scrBar" + tIndex) : 0;
	}

	function getScrBarHeight(tIndex) {
		return contentBox.offsetHeight / contentList[tIndex].offsetHeight * contentBox.offsetHeight;
	}

	//载入上次状态
	function loadLastStatus() {
		if(cookie) {
			var tIndex = getTargetIndex(),
				barPos = getBarPos(tIndex);

			showNow(tIndex);
			scrBar.style.height = getScrBarHeight(tIndex) + "px";
			toBarTop(barPos);
		} else {
			showNow(0);
			scrBar.style.height = getScrBarHeight(0) + "px";
			toBarTop(0);
		}
	}

})();